<template>
	<view class="container">
		<scroll-view scroll-y="true" class="index" lower-threshold='200'
			:style="{height:pageHeight==='auto'?'auto':pageHeight+'px'}" @scrolltolower="lower">
			<view class="noData" v-if="!craneList.length">未找到数据</view>
			<car-card v-for="(item,index) in craneList" :topLine="index!==0" :data="item" :hasOperate="true"
				:hasSearchInfo="true" :searchInfo="searchData" :key="index">
			</car-card>
			<!-- <view v-if="noMore&&craneList.length" class="noMore">没有更多了</view> -->
		</scroll-view>
	</view>

</template>

<script>
	import {
		getCraneListByWay
	} from '@/api/crane.js'
	import carCard from '../common/carCard.vue'

	const legType = {
		'仅主臂': 1,
		'主臂+塔矿': 2,
		'主臂+副臂': 3
	};
	export default {
		components: {
			carCard,
		},
		data() {
			return {
				craneList: [],
				pageindex: 1,
				pagesize: 20,
				noMore: false,
				pageHeight: 'auto',
				loading: false,
				combination: '',
				jibLength: '',
				mainArmLength: '',
				mineTower: '',
				momentPercentage: '',
				raduis: '',
				weight: '',
				way: '',
				searchData: {}
			};
		},
		onLoad({
			combination,
			jibLength,
			mainArmLength,
			mineTower,
			momentPercentage,
			raduis,
			weight,
			obstacleDistance,
			obstacleHeight,
			centerDistance,
			obstacle
		} = {}) {
			this.combination = combination;
			this.jibLength = jibLength;
			this.mainArmLength = mainArmLength;
			this.mineTower = mineTower;
			this.momentPercentage = momentPercentage;
			this.raduis = raduis;
			this.inputWeight = weight;
			this.searchData = {
				combination,
				jibLength,
				mainArmLength,
				mineTower,
				momentPercentage,
				raduis,
				inputWeight:weight,
				obstacleDistance,
				obstacleHeight,
				centerDistance,
				obstacle
			}
			const _this = this;
			uni.getSystemInfo({
				success: function(e) {
					_this.pageHeight = e.windowHeight;
				}
			})
			this.getCraneList();
		},
		watch: {

		},
		onShow() {

		},
		onReady() {
			// 加载dom
			// this.$refs.popup.open()
		},
		methods: {
			getCraneList: function() {
				const _this = this;
				if (_this.loading) {
					return
				}
				this.pageindex === 1 && uni.showLoading({
					title: '加载中···'
				});
				_this.loading = true;
				const percent = this.momentPercentage.split('~');
				const mainArm = this.mainArmLength.split('~');
				const minorArm = legType[this.combination] == 2 ? this.mineTower.split('~') : this.jibLength.split(
					'~');
				getCraneListByWay({
					pageindex: _this.pageindex,
					pagesize: _this.pagesize,
					maxPercent: percent[1],
					minPercent: percent[0],
					weight: this.inputWeight,
					radius: this.raduis,
					legType: legType[this.combination],
					maxMinor: legType[this.combination] == 1 ? '' : minorArm[1],
					minMinor: legType[this.combination] == 1 ? '' : minorArm[0],
					maxPrimary: legType[this.combination] == 1 ? mainArm[1] : '',
					minPrimary: legType[this.combination] == 1 ? mainArm[0] : ''
				}).then(res => {
					_this.craneList = [..._this.craneList, ...res.data.craneList];
					if (!_this.way && _this.craneList[0]) {
						_this.way = _this.craneList[0].way;
					}
					if (res.data.craneList.length < this.pagesize) {
						_this.noMore = true;
					}
				}).finally(() => {
					uni.hideLoading();
					setTimeout(() => {
						_this.loading = false;
					}, 500)
				})
			},
			lower: function() {
				if (this.loading) {
					return
				}
				this.pageindex += 1;
				this.getCraneList();
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			}
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.noData {
		height: 300upx;
		line-height: 300upx;
		text-align: center;
		font-size: 28upx;
		color: #666666;
	}

	.container {
		height: 100%;

		.topArrow {
			position: fixed;
			width: 90upx;
			height: 70upx;
			border-radius: 50%;
			top: -35upx;
			left: 50%;
			margin-left: -45upx;
			background: url(../common/images/downArrow.png) center 100% /60upx auto no-repeat, #FFFFFF;
			z-index: 90;
			box-shadow: 0 3upx 8upx #999;
		}

		.sticky-box {
			width: 100%;
			position: fixed;
			padding: 20px;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
			background-color: #FFFFFF;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			box-shadow: 0 3upx 8upx #999;
			border-bottom-left-radius: 12upx;
			border-bottom-right-radius: 12upx;

			.item {
				flex: 0 0 100%;
				display: flex;
				justify-content: space-between;
				padding: 8upx 0;

				&+.item {
					border-top: 1px solid #EEEEEE;
				}

				.text {
					font-size: 24upx;
					color: #333333;
				}
			}

		}
	}

	.index {
		box-sizing: border-box;
		padding: 6upx 0;
		background: #FFFFFF;
		height: 100%;

		.noMore {
			margin: 50upx 0 30upx;
			text-align: center;
			font-size: 24upx;
			color: #999999;
		}

	}
</style>
